<template>
    <div>
        <div class="box">
            <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
                <van-tabs v-model:active="active" change="tabChange">
                    <van-tab title="全部">
                        <van-skeleton class="skeleton" title :row="8" animate="true" :loading="isShow">
                            <van-tree-select v-model:main-active-index="activeIndex" :items="items"
                                style="height: 720px">
                                <template #content>
                                    <div v-if="data.length != 0">
                                        <div v-for="(item, i) in data">
                                            <div v-if="activeIndex === i">
                                                <div v-if="data[activeIndex].goods.length > 0">
                                                    <div v-for="(items, i) in data[activeIndex].goods">
                                                        <div style="display: flex; width: 100%">
                                                            <div style="margin-left: 5px; width: 80px">
                                                                <van-image width="5rem" height="5rem"
                                                                    @click="detail(item.id, item.name, items.id)"
                                                                    :src="items.photo">
                                                                    <van-tag v-if="items.isTop === 1" class="lableTop"
                                                                        type="danger">顶</van-tag>
                                                                </van-image>
                                                                <van-tag class="lable" :type="items.isShelve === 1 ? 'success' : 'warning'
                ">{{
                                                                    items.isShelve === 1 ? "已上架" : "未上架"
                                                                    }}</van-tag>
                                                            </div>
                                                            <div
                                                                style="flex: 1; margin-left: 5px; padding: 5px 0px 0px 5px">
                                                                <span class="name">{{ items.name }}</span>
                                                                <div class="sales">
                                                                    销量：{{ items.sales }} , 库存：{{
                                                                    items.inventory
                                                                    }}
                                                                </div>
                                                                <div class="sales1">
                                                                    <span v-if="items.promotePrice === 0">
                                                                        <span class="price">￥{{ items.price }} /份</span>
                                                                    </span>
                                                                    <span v-if="items.promotePrice != 0">
                                                                        <span class="prices">￥{{ items.price }}
                                                                            /份</span>
                                                                        <span class="price">￥{{ items.promotePrice }}
                                                                            /份</span>
                                                                    </span>
                                                                    <span>
                                                                        <van-button class="btn"  type="danger"
                                                                            size="mini"
                                                                            @click="caozuo(items, i)">操作</van-button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </van-tree-select>
                        </van-skeleton>
                    </van-tab>
                    <van-tab title="已上架">
                        <van-skeleton class="skeleton" title :row="8" animate="true" :loading="isShow">
                            <van-tree-select v-model:main-active-index="activeIndex" :items="trueitems"
                                style="height: 720px">
                                <template #content>
                                    <div v-if="data.length != 0">
                                        <div v-for="(item, i) in data">
                                            <div v-if="activeIndex === i">
                                                <div v-if="data[activeIndex].goods.length > 0">
                                                    <div v-for="(items, i) in data[activeIndex].goods">
                                                        <div style="display: flex; width: 100%"
                                                            v-if="items.isShelve === 1">
                                                            <div style="margin-left: 5px; width: 80px">
                                                                <van-image width="5rem" height="5rem"
                                                                    @click="detail(item.id, item.name, items.id)"
                                                                    :src="items.photo">
                                                                    <van-tag v-if="items.isTop === 1" class="lableTop"
                                                                        type="danger">顶</van-tag>
                                                                </van-image>
                                                                <van-tag class="lable" :type="items.isShelve === 1 ? 'success' : 'warning'
                ">{{
                                                                    items.isShelve === 1 ? "已上架" : "未上架"
                                                                    }}</van-tag>
                                                            </div>
                                                            <div
                                                                style="flex: 1; margin-left: 5px; padding: 5px 0px 0px 5px">
                                                                <span class="name">{{ items.name }}</span>
                                                                <div class="sales">
                                                                    销量：{{ items.sales }} , 库存：{{
                                                                    items.inventory
                                                                    }}
                                                                </div>
                                                                <div class="sales1">
                                                                    <span v-if="items.promotePrice === 0">
                                                                        <span class="price">￥{{ items.price }} /份</span>
                                                                    </span>
                                                                    <span v-if="items.promotePrice != 0">
                                                                        <span class="prices">￥{{ items.price }}
                                                                            /份</span>
                                                                        <span class="price">￥{{ items.promotePrice }}
                                                                            /份</span>
                                                                    </span>
                                                                    <span>
                                                                        <van-button class="btn" type="danger"
                                                                            size="mini"
                                                                            @click="caozuo(items, i)">操作</van-button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </van-tree-select>
                        </van-skeleton>
                    </van-tab>
                    <van-tab title="未上架">
                        <van-skeleton class="skeleton" title :row="8" animate="true" :loading="isShow">
                            <van-tree-select v-model:main-active-index="activeIndex" :items="falseitems"
                                style="height: 720px">
                                <template #content>
                                    <div v-if="data.length != 0">
                                        <div v-for="(item, i) in data">
                                            <div v-if="activeIndex === i">
                                                <div v-if="data[activeIndex].goods.length > 0">
                                                    <div v-for="(items, i) in data[activeIndex].goods">
                                                        <div style="display: flex; width: 100%"
                                                            v-if="items.isShelve === 0">
                                                            <div style="margin-left: 5px; width: 80px">
                                                                <van-image width="5rem" height="5rem"
                                                                    @click="detail(item.id, item.name, items.id)"
                                                                    :src="items.photo">
                                                                    <van-tag v-if="items.isTop === 1" class="lableTop"
                                                                        type="danger">顶</van-tag>
                                                                </van-image>
                                                                <van-tag class="lable" :type="items.isShelve === 1 ? 'success' : 'warning'
                ">{{
                                                                    items.isShelve === 1 ? "已上架" : "未上架"
                                                                    }}</van-tag>
                                                            </div>
                                                            <div
                                                                style="flex: 1; margin-left: 5px; padding: 5px 0px 0px 5px">
                                                                <span class="name">{{ items.name }}</span>
                                                                <div class="sales">
                                                                    销量：{{ items.sales }} , 库存：{{
                                                                    items.inventory
                                                                    }}
                                                                </div>
                                                                <div class="sales1">
                                                                    <span v-if="items.promotePrice === 0">
                                                                        <span class="price">￥{{ items.price }} /份</span>
                                                                    </span>
                                                                    <span v-if="items.promotePrice != 0">
                                                                        <span class="prices">￥{{ items.price }}
                                                                            /份</span>
                                                                        <span class="price">￥{{ items.promotePrice }}
                                                                            /份</span>
                                                                    </span>
                                                                    <span>
                                                                        <van-button class="btn" type="danger"
                                                                            size="mini"
                                                                            @click="caozuo(items, i)">操作</van-button>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </van-tree-select>
                        </van-skeleton>
                    </van-tab>
                </van-tabs>
                <div class="bottom">
                    <div style="flex: 1; padding: 3px">
                        <van-button type="warning" style="width: 100%" @click="updateType">管理分类</van-button>
                    </div>
                    <div style="flex: 1; padding: 3px">
                        <van-button type="primary" style="width: 100%" @click="addshops">新增商品</van-button>
                    </div>
                </div>
                <div>
                    <van-overlay :show="showDiv" @click="showDiv = false" style="background: rgba(0, 0, 0, 0.2)">
                        <div class="wrapper">
                            <div class="block">
                                <div class="shopcz">商品操作</div>
                                <div style="display: flex; margin-top: 5px">
                                    <div style="flex: 1; text-align: center">
                                        <van-button type="primary" style="width: 130px" @click="() => {
                shows = true;
                }
                ">补货</van-button>
                                    </div>
                                    <div style="flex: 1; text-align: center" v-if="goodData.promotePrice === 0">
                                        <van-button type="success" style="width: 130px" @click="() => {
                    showDiscount = true;
                }
                ">设置折扣</van-button>
                                    </div>
                                    <div style="flex: 1; text-align: center" v-if="goodData.promotePrice != 0">
                                        <van-button type="success" style="width: 130px"
                                            @click="cancelDiscount()">取消折扣</van-button>
                                    </div>
                                </div>
                                <div style="
                    display: flex;
                    margin-top: 5px;
                    border-bottom: 1px solid #eee;
                    padding-bottom: 5px;
                  ">
                                    <div style="flex: 1; text-align: center" v-if="goodData.isTop === 0">
                                        <van-button type="warning" style="width: 130px" @click="isTop()">置顶</van-button>
                                    </div>
                                    <div style="flex: 1; text-align: center" v-if="goodData.isTop === 1">
                                        <van-button type="warning" style="width: 130px"
                                            @click="isTop()">取消置顶</van-button>
                                    </div>
                                    <div style="flex: 1; text-align: center" v-if="goodData.isShelve === 0">
                                        <van-button style="
                        width: 130px;
                        background-color: purple;
                        color: #fff;
                      " @click="isShelve()">上架</van-button>
                                    </div>
                                    <div style="flex: 1; text-align: center" v-if="goodData.isShelve === 1">
                                        <van-button style="
                        width: 130px;
                        background-color: purple;
                        color: #fff;
                      " @click="isShelve()">下架</van-button>
                                    </div>
                                </div>
                                <div class="cancel" @click="cancel">取消</div>
                            </div>
                        </div>
                    </van-overlay>
                </div>
                <van-action-sheet v-model:show="shows" title="补货">
                    <div class="content">
                        <van-cell>
                            <template #title>
                                <span class="custom-title">补货数量</span>
                                <van-stepper style="float: right" v-model="value" step="100" />
                                <van-divider />
                                <van-button type="primary" block @click="yesBuhuo">确定</van-button>
                            </template>
                        </van-cell>
                    </div>
                </van-action-sheet>
                <van-action-sheet v-model:show="showDiscount" title="设置折扣">
                    <div class="content">
                        <van-cell>
                            <template #title>
                                <van-field disabled="true" :placeholder="goodData.name" label="商品名称" />
                                <van-field disabled="true" :placeholder="'￥' + goodData.price" label="原价格" />
                                <van-field placeholder="请输入活动价格" label="活动价格" v-model="activePrice" />
                                <van-cell title="有效日期" :value="date" @click="showActive = true" />
                                <van-calendar v-model:show="showActive" type="range" @confirm="onConfirmActive" />
                                <van-divider />
                                <van-button type="primary" block @click="yesZhekou">确定</van-button>
                            </template>
                        </van-cell>
                    </div>
                </van-action-sheet>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import { reactive, ref, toRefs, watchEffect } from "vue";
import {
    getTypesAndGoods,
    supplierBuhuo,
    promoteGoods,
    cancelPromoteGoods,
    goodsShelve,
    goodsTop,
} from "../api/goods";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
export default {
    setup() {
        const router = useRouter();

        const data = reactive({
            url: '/shangpin/clickimg?id=',
            data: [],
            trueData: [], //已上架(所有类别,类别下商品的数量)
            falseData: [], //未上架(所有类别,类别下商品的数量)
            shows: false, //补货动作面板是否开启
            showDiscount: false, //设置折扣动作面板是否开启
            activePrice: "", //活动价格
            value: 100, //补货数量
            date: "", //折扣时间区间
            beginDate: "", //活动开始时间
            endDate: "", //活动结束时间
            showActive: false,
            total: "",
            showDiv: false, //遮罩层的显示与隐藏
            show: false,
            isShow: true,
            isLoading: true,
            goodData: [],
            index: 0,
            active: 0,
            items: [
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
            ],
            trueitems: [
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
            ],
            falseitems: [
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
                { text: "", disabled: true, badge: "" },
            ],
            activeIndex: ref(0),
        });

        const formatDate = (date) =>
            `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        const onConfirmActive = (values) => {
            console.log(values);
            const [start, end] = values;
            data.showActive = false;
            data.date = `${formatDate(start)} - ${formatDate(end)}`;
            data.beginDate = formatDate(start);
            data.endDate = formatDate(end);
        };

        const onRefresh = () => {
            methods.bindData();
            setTimeout(() => {
                data.isLoading = false;
            }, 2000);
        };

        const methods = {
            //获取供应商的所有类别和类别下商品
            bindData() {
                getTypesAndGoods({}).then((res) => {
                    if (res.result === 0) {
                        const trueDate = [];
                        const falseDate = [];
                        data.isShow = false;
                        data.data = res.data;

                        data.data.forEach((d, i) => {
                            data.items[i].text = d.name; //类别名
                            data.items[i].badge = res.data[i].goods.length; //类别下商品数量
                            // console.log(data.items[i].badge,"222222222222");
                            if (i <= res.data.length - 1) {
                                data.items[i].disabled = false;
                            }
                        });

                        res.data.forEach((d) => {
                            const trueItem = []; //装载已上架商品信息
                            const falseItem = []; //装载未上架商品信息
                            d.goods.forEach((e) => {
                                if (e.isShelve === 1) {
                                    trueItem.push(e);
                                } else {
                                    falseItem.push(e);
                                }
                            });
                            trueDate.push({ name: d.name, goods: trueItem });
                            falseDate.push({ name: d.name, goods: falseItem });
                        });

                        data.trueData = trueDate;
                        data.falseData = falseDate;

                        trueDate.forEach((d, i) => {
                            data.trueitems[i].text = d.name;
                            if (i <= trueDate.length) {
                                data.trueitems[i].disabled = false;
                                data.trueitems[i].badge = trueDate[i].goods.length;
                            }
                        });

                        falseDate.forEach((d, i) => {
                            data.falseitems[i].text = d.name;
                            if (i <= falseDate.length) {
                                data.falseitems[i].disabled = false;
                                data.falseitems[i].badge = falseDate[i].goods.length;
                            }
                        });
                    }
                });
            },
        };

        watchEffect(() => {
            methods.bindData();
        });

        const event = {
            caozuo(item, i) {
                data.goodData = item;
                data.showDiv = true;
            },

            //图片详情跳转
            detail(typeid, typename, id) {
                router.push({
                    path: "/shangpin/clickimg",
                    query: { id: id },
                });
            },
            //管理分类跳转
            updateType() {
                router.push({ path: "/shangpin/updateType" });
            },
            //新增商品跳转
            addshops() {
                router.push({ path: "/shangpin/addGoods" });
            },

            //确认补货
            yesBuhuo() {
                showConfirmDialog({
                    message: "确认补货吗",
                }).then(() => {
                    supplierBuhuo({
                        id: data.goodData.id,
                        number: data.value,
                    }).then((res) => {
                        if (res.result === 0) {
                            showSuccessToast("补货成功");
                            data.shows = false;
                            methods.bindData();
                        }
                    });
                });
            },

            //设置折扣
            yesZhekou() {
                if (data.activePrice === "") {
                    showToast("请输入活动价格");
                } else if (data.activePrice > data.goodData.price) {
                    showToast("活动价格不得比原价格高");
                } else if (data.date === "") {
                    showToast("请选择活动有效日期");
                } else {
                    showConfirmDialog({
                        message: "确认设置为活动商品吗",
                    }).then(() => {
                        promoteGoods({
                            id: data.goodData.id,
                            promotePrice: data.activePrice,
                            begin: data.beginDate,
                            end: data.endDate,
                        }).then((res) => {
                            if (res.result === 0) {
                                showSuccessToast("设置活动商品成功");
                                data.showDiscount = false;
                                methods.bindData();
                            }
                        });
                    });
                }
            },
            //取消折扣
            cancelDiscount() {
                showConfirmDialog({
                    message: "确认取消活动商品吗",
                }).then(() => {
                    cancelPromoteGoods({
                        id: data.goodData.id,
                    }).then((res) => {
                        if (res.result === 0) {
                            showSuccessToast("取消活动商品成功");
                            methods.bindData();
                        }
                    });
                });
            },

            //置顶-取消置顶
            isTop() {
                goodsTop({
                    id: data.goodData.id,
                    isTop: data.goodData.isTop === 1 ? "0" : "1",
                }).then((res) => {
                    if (res.result === 0) {
                        showSuccessToast("操作成功");
                        methods.bindData();
                    }
                });
            },

            //上架-下架
            isShelve() {
                goodsShelve({
                    id: data.goodData.id,
                    isShelve: data.goodData.isShelve === 1 ? "0" : "1",
                }).then((res) => {
                    if (res.result === 0) {
                        showSuccessToast("操作成功");
                        methods.bindData();
                    }
                });
            },
            //取消操作
            cancel() {
                data.show = false;
            },
        };

        return {
            ...toRefs(data),
            ...event,
            onRefresh,
            onConfirmActive,
        };
    },
};
</script>

<style scoped>
.content {
    padding: 16px 16px 160px;
}

.skeleton {
    margin: 20px 5px 0px 5px;
}

.box {
    margin: 10px;
}

.goodsPage {
    flex: 1;
}

.lable {
    position: relative;
    right: 80px;
    bottom: 68px;
}

.lableTop {
    position: relative;
    bottom: 80px;
    float: right;
}

.lables {
    position: relative;
    right: 80px;
    bottom: 68px;
}

.name {
    font-size: 14px;
}

.price {
    font-size: 12px;
    color: red;
}

.prices {
    font-size: 12px;
    text-decoration: line-through;
}

.sales {
    font-size: 10px;
    color: gray;
    margin-top: 10px;
}
.sales1 {
    margin-top: 10px;
}

.btn {
    float: right;
    width: 40px;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
}

.shopcz {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
    border-bottom: 1px solid #eee;
}

.cancel {
    text-align: center;
    margin-top: 5px;
    font-size: 16px;
}

.boxs {
    flex: 1;
    border: 1px solid red;
}

.bottom {
    width: 95%;
    height: 50px;
    position: fixed;
    bottom: 60px;
    display: flex;
}
</style>